<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击计数按钮</title>
    <style>
        #countButton {
            font-size: 16px;
            padding: 10px 20px;
            border: none;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 20px;
        }
        #countDisplay {
            margin-top: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>小方不慌</h1>
        <p>我是小方不慌</p>
        <h2>小标题</h2>
        <!-- 添加按钮 -->
        <button id="countButton">点击我</button>
        <!-- 显示计数 -->
        <div id="countDisplay">计数: 0</div>

        <script>
            // 获取按钮和显示计数的元素
            var button = document.getElementById('countButton');
            var countDisplay = document.getElementById('countDisplay');
            var count = 0; // 初始化计数

            // 为按钮添加点击事件监听器
            button.addEventListener('click', function() {
                count++; // 每次点击计数加1
                countDisplay.textContent = '计数: ' + count; // 更新页面上的计数显示
            });
        </script>
    </div>
</body>
</html>